<template>
  <div class="body">
    <div class="container">
      <p class="title">米娜科技</p>
      <div class="login-box">
        <div class="username-box">
          <span class="username-title">用户名</span>
          <div class="line"></div>
          <input type="text" v-model="form.username">
        </div>
        <div class="password-box">
          <span class="password-title">密码</span>
          <div class="line"></div>
          <input type="text" v-model="form.password">
        </div>
        <div class="login-btn" @click="submit">登录</div>
      </div>
      <div class="switch-box">
        <div class="go-reg" v-if="true">
          <p class="active-title">
            没有账号？
          </p>
          <p class="active-btn">立即注册</p>
        </div>
        <div class="go-login" v-else>
          <p class="active-title">
            已有账号，
          </p>
          <p class="active-btn">返回登录</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { userLogin, userReg } from "../api/user";
import { ref, reactive } from "vue";


const form = reactive({
  // username: "mumei",
  // password: "123456",
  username: "",
  password: "",
});
const newForm = reactive({
  username: "",
  password: "",
  repassword: ""
});
const rules = reactive({
  username: [
    {
      rule: /^.{2,18}$/,
      message: "账号长度在 2 到 18 个字符",
    },
  ],
  password: [
    {
      rule: /^.{2,18}$/,
      message: "密码长度在 2 到 18 个字符",
    },
  ],
});
function validate(key) {
  let flag = true;
  rules[key].forEach((v) => {
    if (!v.rule.test(form[key])) {
      console.log(v.message);
      flag = false;
      return false;
    }
  });
  return flag;
}
const submit = async () => {
  if (!validate("username")) return; //validate('username')为false才执行
  if (!validate("password")) return; //validate('password')为false才执行
  const res = await userLogin(form.username, form.password)
  console.log(res.data,"登录成功");
};
async function submitReg() {
  const res = await userReg(newForm.username, newForm.password);
  console.log("a", res.data);
}




</script>

<style lang="postcss" scoped>
* {
  /* 初始化 */
  margin: 0;
  padding: 0;
}

.body {
  min-height: 100vh;
  /* 弹性布局 居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #2F90DD, #8C54B2);
}

.container {
  width: 430px;
  height: 695px;
  border-radius: 15px;
  overflow: hidden;
  @apply bg-light-50 flex flex-col;
}

.title {
  @apply mx-auto mt-16 font-black;
  font-size: 40px;
}

.login-box {
  @apply pt-20;

  .username-box,
  .password-box {
    @apply mx-12 flex flex-col relative;
    border-bottom: 2px solid #A4A4A4;
    height: 80px;
    margin-bottom: 40px;

    &:hover .username-title,
    &:hover .password-title {
      top: 0
    }

    &:hover .line {
      width: 334px;
    }

    .username-title,
    .password-title {
      position: absolute;
      font-size: 20px;
      color: #A4A4A4;
      margin: 5px 0;
      /* 动态改变 */
      top: 38px;
      /* top: 0px; */
      transition: all .25s;
    }

    .line {
      @apply absolute;
      bottom: -2px;
      left: 0px;
      height: 2px;
      transition: all .25s;
      /* 动态改变 */
      /* width: 334px; */
      width: 0px;
      background: linear-gradient(90deg, #2F90DD, #8C54B2);
    }

    input {
      margin-top: auto;
      height: 40px;
      outline: none;
      border: none;
      background: none;
    }
  }


  .login-btn {
    width: 334px;
    font-size: 30px;
    background: linear-gradient(90deg, #2F90DD, #8C54B2);
    @apply text-light-50 my-0 mx-auto text-center py-2;
  }
}

.switch-box {
  height: 60px;
  @apply flex mt-4;

  .go-reg,
  .go-login {

    @apply flex m-auto;

    .active-btn {
      color: #2F90DD;
    }
  }
}
</style>
